<template>
    <el-aside>
      <el-menu
        default-active="/fkmmanage/records/7"
        class="el-menu-vertical-demo"
        :unique-opened="true" 
        :router="true"
        :collapse="isCollapse1"
        background-color="#fff"
        active-text-color="#1890ff"
      >
        <el-sub-menu  v-for="item in menulist.value" :key="item.id" :index="item.id+''">
          <template #title>
            <el-icon ><Loading/></el-icon>
            <span>{{ item.name }}</span>
          </template>
          <el-menu-item-group v-for="items in item.children" :key="items.id">
            <el-menu-item :index="'/fkmmanage'+items.url">{{ items.name }}</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-aside>
</template>

<script setup lang="ts">
import emitter from "../../utils/bus/emitter";
import { ref,reactive } from 'vue';
import {useLOGINStore} from '../../stores/loggin';
let useloginstore = useLOGINStore()
const menulist:any = reactive(useloginstore.menu)
const isCollapse1:any = ref(false)
const arrayToTree = (arr: any[], pid: number) => {
  return arr.reduce((res, current) => {
    if (current['pid'] === pid) {
      current.children = arrayToTree(arr, current['id']);
      return menulist.value = res.concat(current);
    }
    return res;
  }, []);
};
arrayToTree(menulist, 0)
// console.log(menulist.value);
// 这样两个组件间就可以进行传值通信了
emitter.on("isCollapse", (isCollapse) => {
    // console.log(isCollapse)
    isCollapse1.value = isCollapse
})


</script>

<style scoped lang="less">

</style>